<template>
  <div class="q-pa-md">
    <div style="color: blue">
      <fieldset>
        <legend>quickItems</legend>
        {{ quickItems }}
      </fieldset>
      <fieldset>
        <legend>currentPage</legend>
        {{ currentPage }}
      </fieldset>
      <fieldset>
        <legend>pageSize</legend>
        {{ pageSize }}
      </fieldset>
    </div>

    <fieldset>
      <legend>pageSize单项</legend>
      <t-prefab-pagination
        v-model="currentPage"
        :prefab="prefab"
        :max="maxPage"
      ></t-prefab-pagination>
    </fieldset>

    <fieldset>
      <legend>v-model:pageSize</legend>
      <t-prefab-pagination
        ref="refWidget"
        v-model="currentPage"
        :prefab="prefab"
        :max="maxPage"
      ></t-prefab-pagination>
    </fieldset>
    <fieldset>
      <legend>pageSizeChange 事件</legend>
      <t-prefab-pagination
        ref="refWidget"
        v-model="currentPage"
        :prefab="prefab"
        :max="maxPage"
        @pageChanged="onPageChangedHandler"
        @pageSizeChanged="onPageSizeChangedHandler"
      ></t-prefab-pagination>
    </fieldset>
    <pre>
      {{ msg }}
    </pre>
  </div>
</template>

<script>
import { useQuasar } from '@teld/q-components';
import { result, transform } from 'lodash';
import { computed, ref } from 'vue';

export default {
  setup() {
    const $q = useQuasar();

    const refWidget = ref(null);
    const prefab = ref('simple');

    const currentPage = ref(1);
    const totals = ref(1118);
    const pageSize = ref(10);
    const maxPage = computed(() => {
      return Math.ceil(totals.value / pageSize.value);
    });

    function onPageSizeChangedHandler(ps) {
      pageSize.value = ps;
    }

    function onPageChangedHandler(page) {
      alert('pageChanged: ' + page);
      console.log('pageChanged', page);
    }
    return {
      prefab,
      refWidget,
      currentPage,
      totals,
      pageSize,
      onPageSizeChangedHandler,
      onPageChangedHandler,
      maxPage
    };
  },
};
</script>
